<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        offset="50"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <!-- immediate-check 是否在初始化时立即执行滚动位置检查 -->
        <ArticleItem
          v-for="(item, index) in list"
          :key="index"
          :objItem="item"
          @dislikeEV="disLikeFn"
          @reportEV="reportFn"
          @click.native="itemClickFN(item.art_id)"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue'
import { getAllArticleListAPI, dislikeArticleAPI, reportArticleAPI } from '@/api/index.js'
import { Notify } from 'vant'

//  问题： 网页刚打开，created里的请求和onload的请求同时发送，请求的都是最新数据
//  onLoad中，2次一样的数据合并，数据重复了，key重复了(改key的值)
// 原因：van-list组件，组件挂载时，默认就会判定一次是否触底
// 第一页数据也是网络请求回来的， 标签先挂载了，数据回来更新DOM，所以标签没有高度，list的load上来就会触发

export default {
  props: {
    // 频道id
    channelId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: [], // 文章列表
      loading: false, // 底部加载状态
      finished: false, // 底部完成状态

      theTime: (new Date()).getTime(), // 用于分页，获取事件戳,
      isLoading: false // 顶部下拉刷新
    }
  },
  methods: {
    // 获取文章列表
    async getAllArticleList() {
      const { data: res } = await getAllArticleListAPI({
        channel_id: this.channelId,
        timestamp: this.theTime
      })
      // pre_timestamp 下一段开头的那一篇文章的时间戳
      this.list = res.data.results
      this.theTime = res.data.pre_timestamp
      // console.log(res.data)
    },

    // 上拉异步更新数据
    async onLoad() {
      const { data: res } = await getAllArticleListAPI({
        channel_id: this.channelId,
        timestamp: this.theTime
      })

      this.list = [...this.list, ...res.data.results]
      this.theTime = res.data.pre_timestamp

      this.loading = false
      if (res.data.pre_timestamp === null) {
        // 当时间戳为null的时候，说明已经到底了将finished设置为true
        this.finished = true
      }
      // console.log(res.data)
    },

    // 顶部下拉跟新数据操作
    async onRefresh() {
      // 清空list，重新获取数据
      // this.list = []
      // this.theTime = (new Date()).getTime()
      const { data: res } = await getAllArticleListAPI({
        channel_id: this.channelId,
        timestamp: this.theTime
      })

      this.list = [...res.data.results, ...this.list]
      this.theTime = res.data.pre_timestamp

      // 顶部状态为false
      this.isLoading = false
    },

    // 反馈不敢兴趣
    async disLikeFn(art_id) {
      const { data: res } = await dislikeArticleAPI(art_id)
      Notify({ type: 'success', message: '反馈成功' })
      console.log(res)
    },
    // 二级反馈 垃圾内容
    async reportFn(art_id, type) {
      const { data: res } = await reportArticleAPI({ art_id, type })
      Notify({ type: 'success', message: '举报成功' })
      console.log(res)
    },

    // 路由跳转到详情页面
    itemClickFN(id) {
      this.$router.push({
        path: `/article_detail?art_id=${id}`
      })
    }
  },
  created() {
    this.getAllArticleList()
  },
  components: {
    ArticleItem
  }
}
</script>

<style>

</style>
